import { Button, Card, Form, Input } from 'antd'

import { useEffect } from 'react'
import './PaymentConfig.css'

export default function PaymentConfig({ type, title, items, onFinish, onFailed }) {
  const [form] = Form.useForm()
  useEffect(() => {
    const result = items.reduce((acc, cur) => ((acc[cur.key] = cur.value), acc), {})
    console.log('%c Line:10 🌭 result', 'color:#33a5ff', result)
    form.setFieldsValue(result)
    return () => {
      form.resetFields()
    }
  }, [type, items])

  return (
    <div>
      <Card className={`panel-${type}-config`} type="inner" title={title}>
        <Form
          name={type}
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          form={form}
          onFinish={onFinish}
          onFinishFailed={onFailed}
          autoComplete="off">
          {items.map((item) => (
            <Form.Item
              key={item.key}
              label={item.name}
              name={item.key}
              rules={[{ required: true, message: '请输入' + item.name + '!' }]}>
              <div>
                <Input defaultValue={item.value} />
                <p style={{ fontSize: 12, color: 'gray', opacity: 0.4 }}>{item.desc}</p>
              </div>
            </Form.Item>
          ))}

          <Form.Item label={null}>
            <Button
              size="large"
              htmlType="submit"
              className={`w-full text-white! btn-${type}-submit`}>
              保 存
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}
